<template>
  <div class="intro-y flex items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">Chart</h2>
  </div>
  <div class="intro-y grid grid-cols-12 gap-6 mt-5">
    <div class="col-span-12 lg:col-span-6">
      <!-- BEGIN: Vertical Bar Chart -->
      <PreviewComponent class="intro-y box" v-slot="{ toggle }">
        <div
          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">Vertical Bar Chart</h2>
          <div
            class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0"
          >
            <label class="form-check-label ml-0" for="show-example-1"
              >Show example code</label
            >
            <input
              @click="toggle"
              class="form-check-input mr-0 ml-3"
              type="checkbox"
            />
          </div>
        </div>
        <div class="p-5">
          <Preview>
            <VerticalBarChart :height="400" />
          </Preview>
          <Source>
            <Highlight>
              {{ `
              <VerticalBarChart :height="400" />
              ` }}
            </Highlight>
          </Source>
        </div>
      </PreviewComponent>
      <!-- END: Vertical Bar Chart -->
      <!-- BEGIN: Horizontal Bar Chart -->
      <PreviewComponent class="intro-y box mt-5" v-slot="{ toggle }">
        <div
          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">Horizontal Bar Chart</h2>
          <div
            class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0"
          >
            <label class="form-check-label ml-0" for="show-example-2"
              >Show example code</label
            >
            <input
              @click="toggle"
              class="form-check-input mr-0 ml-3"
              type="checkbox"
            />
          </div>
        </div>
        <div class="p-5">
          <Preview>
            <HorizontalBarChart :height="400" />
          </Preview>
          <Source>
            <Highlight>
              {{ `
              <HorizontalBarChart :height="400" />
              ` }}
            </Highlight>
          </Source>
        </div>
      </PreviewComponent>
      <!-- END: Horizontal Bar Chart -->
      <!-- BEGIN: Donut Chart -->
      <PreviewComponent class="intro-y box mt-5" v-slot="{ toggle }">
        <div
          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">Donut Chart</h2>
          <div
            class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0"
          >
            <label class="form-check-label ml-0" for="show-example-3"
              >Show example code</label
            >
            <input
              @click="toggle"
              class="form-check-input mr-0 ml-3"
              type="checkbox"
            />
          </div>
        </div>
        <div class="p-5">
          <Preview>
            <DonutChart :height="400" />
          </Preview>
          <Source>
            <Highlight>
              {{ `
              <DonutChart :height="400" />
              ` }}
            </Highlight>
          </Source>
        </div>
      </PreviewComponent>
      <PreviewComponent class="intro-y box mt-5">
        <div class="p-5">
          <chart1 />
        </div>
      </PreviewComponent>
      <PreviewComponent class="intro-y box mt-5">
        <div class="p-5">
          <chart2 />
        </div>
      </PreviewComponent>
      <!-- END: Donut Chart -->
    </div>
    <div class="col-span-12 lg:col-span-6">
      <!-- BEGIN: Stacked Bar Chart -->
      <PreviewComponent class="intro-y box" v-slot="{ toggle }">
        <div
          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">Stacked Bar Chart</h2>
          <div
            class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0"
          >
            <label class="form-check-label ml-0" for="show-example-4"
              >Show example code</label
            >
            <input
              @click="toggle"
              class="form-check-input mr-0 ml-3"
              type="checkbox"
            />
          </div>
        </div>
        <div class="p-5">
          <Preview>
            <StackedBarChart :height="400" />
          </Preview>
          <Source>
            <Highlight>
              {{ `
              <StackedBarChart :height="400" />
              ` }}
            </Highlight>
          </Source>
        </div>
      </PreviewComponent>
      <!-- END: Stacked Bar Chart -->
      <!-- BEGIN: Line Chart -->
      <PreviewComponent class="intro-y box mt-5" v-slot="{ toggle }">
        <div
          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">Line Chart</h2>
          <div
            class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0"
          >
            <label class="form-check-label ml-0" for="show-example-5"
              >Show example code</label
            >
            <input
              @click="toggle"
              class="form-check-input mr-0 ml-3"
              type="checkbox"
            />
          </div>
        </div>
        <div class="p-5">
          <Preview>
            <LineChart :height="400" />
          </Preview>
          <Source>
            <Highlight>
              {{ `
              <LineChart :height="400" />
              ` }}
            </Highlight>
          </Source>
        </div>
      </PreviewComponent>
      <!-- END: Line Chart -->
      <!-- BEGIN: Pie Chart -->
      <PreviewComponent class="intro-y box mt-5" v-slot="{ toggle }">
        <div
          class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">Pie Chart</h2>
          <div
            class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0"
          >
            <label class="form-check-label ml-0" for="show-example-6"
              >Show example code</label
            >
            <input
              @click="toggle"
              class="form-check-input mr-0 ml-3"
              type="checkbox"
            />
          </div>
        </div>
        <div class="p-5">
          <Preview>
            <PieChart :height="400" />
          </Preview>
          <Source>
            <Highlight>
              {{ `
              <PieChart :height="400" />
              ` }}
            </Highlight>
          </Source>
        </div>
      </PreviewComponent>

      <!-- END: Pie Chart -->
    </div>
  </div>
</template>

<script setup>
import VerticalBarChart from "@/components/vertical-bar-chart/Main.vue";
import StackedBarChart from "@/components/stacked-bar-chart/Main.vue";
import HorizontalBarChart from "@/components/horizontal-bar-chart/Main.vue";
import LineChart from "@/components/line-chart/Main.vue";
import DonutChart from "@/components/donut-chart/Main.vue";
import PieChart from "@/components/pie-chart/Main.vue";
import chart1 from "./chart1.vue";
import chart2 from "./chart2.vue";
</script>
